<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../../static/plugins/elementui/index.css">
    <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">
    <el-tabs type="border-card">
        <el-tab-pane label="预约套餐详细信息">
            <template>

                <el-table
                        :data="tableData.list"
                        height="500"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            label="会员名"
                            prop="memberName" width="100">
                    </el-table-column>
                    <el-table-column
                            label="会员性别"
                            prop="memberSex" width="100">
                    </el-table-column>
                    <el-table-column
                            label="套餐名"
                            prop="setMemalName" width="100">
                    </el-table-column>
                    <el-table-column
                            label="预约日期"
                            prop="orderDate" width="100">
                    </el-table-column>
                    <el-table-column
                            label="是否到诊"
                            prop="orderStatus" windth="100">
                        <template slot-scope="scope" width="180">
                        <label v-if="tableData.list[scope.$index].orderStatus=='是'">已到诊</label>
                        <label v-else-if="tableData.list[scope.$index].orderStatus=='无'">未到诊</label>
                        <label v-else>未知</label>
                    </template>
                    </el-table-column>
                    <el-table-column
                            label="套餐适合性别"
                            prop="setMemalSex"
                            width="220">
                        <template slot-scope="scope" width="180">
                            <label v-if="tableData.list[scope.$index].setMemalSex==0">男女通用</label>
                            <label v-if="tableData.list[scope.$index].setMemalSex==1">男</label>
                            <label v-if="tableData.list[scope.$index].setMemalSex==2">女</label>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="套餐适合年龄"
                            prop="setMemalAge" width="150">
                    </el-table-column>
                    <el-table-column
                            label="套餐价格"
                            prop="setPrice" width="220">
                    </el-table-column>
                    <el-table-column
                            label="套餐注意事项"
                            prop="setMemalAttention" width="180">
                    </el-table-column>
                    <el-table-column
                            label="套餐备注"
                            prop="setMemalReamrk" width="220">
                    </el-table-column>
                    <el-table-column
                            label="套餐图片"
                            prop="setMemalImg">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            width="180"
                            label="操作">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="name"
                                    size="mini"
                                    placeholder="输入会员姓名查找" @input="showSetMemal(name)"/>
                        </template>
                        <template slot-scope="scope">
                            <!--  @click="handleEdit(scope.$index,scope.row)"-->
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.row)"
                            >修改
                            </el-button>
                            <!--handleEdit(scope.$index, scope.row)-->
                            <!--  @click="deleteMember(scope.row)"-->
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="deleteOrder(scope.row)"
                            >删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="tableData.pageNum"
                    :page-size="tableData.pageSize"
                    :total="tableData.total"
                    @current-change="showSetMemal(name,$event)">
            </el-pagination>
            <p>当前为:{{tableData.pageNum}}页,总页数为:{{tableData.pages}},总条数为:{{tableData.total}}</p>
        </el-tab-pane>
        <el-tab-pane label="预约检查项目详细信息">
            <template>

                <el-table
                        :data="tableData2.list"
                        height="500"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            label="会员名"
                            prop="memberName" width="100">
                    </el-table-column>
                    <el-table-column
                            label="会员性别"
                            prop="memberSex" width="100">
                    </el-table-column>
                    <el-table-column
                            label="预约日期"
                            prop="orderDate" windth="240">
                    </el-table-column>
                    <el-table-column
                            label="检查项目名称"
                            prop="setMemalName"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            label="是否到诊"
                            prop="orderStatus" width="150">
                        <template slot-scope="scope" width="180">
                            <label v-if="tableData2.list[scope.$index].orderStatus=='是'">已到诊</label>
                            <label v-else-if="tableData2.list[scope.$index].orderStatus=='无'">未到诊</label>
                            <label v-else>未知</label>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="检查项目适合性别"
                            prop="setMemalSex" width="220">
                        <template slot-scope="scope" width="180">
                            <label v-if="tableData2.list[scope.$index].setMemalSex==0">男女通用</label>
                            <label v-if="tableData2.list[scope.$index].setMemalSex==1">男</label>
                            <label v-if="tableData2.list[scope.$index].setMemalSex==2">女</label>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="检查项目价格"
                            prop="setPrice" width="180">
                    </el-table-column>
                    <el-table-column
                            label="检查项目类型"
                            prop="type" width="220">
                    </el-table-column>
                    <el-table-column
                            label="检查项目注意事项"
                            prop="setMemalAttention">
                    </el-table-column>
                    <el-table-column
                            label="检查项目备注"
                            prop="setMemalReamrk">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            width="180"
                            label="操作">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="name2"
                                    size="mini"
                                    placeholder="输入姓名查找" @input="showCheckItem(name2)"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                            @click="handleEdit(scope.row)">修改
                            </el-button>
                            <!--handleEdit(scope.$index, scope.row)-->

                            <el-button
                                    size="mini"
                                    type="danger"
                                @click="deleteOrder(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="tableData2.pageNum"
                    :page-size="tableData2.pageSize"
                    :total="tableData2.total"
                    @current-change="showCheckItem(name2,$event)">
            </el-pagination>
            <p>当前为:{{tableData2.pageNum}}页,总页数为:{{tableData2.pages}},总条数为:{{tableData2.total}}</p>
        </el-tab-pane>
    </el-tabs>

    <el-dialog title="预约编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="预约类型" :label-width="formLabelWidth">
                <el-select v-model="form.orderType" placeholder="请选择">
                    <el-option
                            label="微信预约"
                            value="微信预约">
                    </el-option>
                    <el-option
                            label="电话预约"
                            value="电话预约">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="预约状态" :label-width="formLabelWidth">
                <el-select v-model="form.orderStatus" placeholder="请选择">
                    <el-option
                            label="已到诊"
                            value="是">
                    </el-option>
                    <el-option
                            label="未到诊"
                            value="无">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="预约时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.orderDate"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelEdit">取 消</el-button>
            <el-button type="primary" @click="updateOrder(form)">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="../../../static/js/vue.js"></script>
<script src="../../../static/plugins/elementui/index.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
<script src="../../../static/js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            tableData: '',
            tableData2: '',
            pageNum: '',
            name: '',
            pageNum2: '',
            name2: '',
            dialogFormVisible:''
        },data(){
            return{
                tableData:'',
                tableData2:'',
                pageNum:'',
                pageNum2:'',
                name:'',
                name2:'',
                form:{
                    orderDate:'',
                    orderType:'',
                    orderStatus:'',
                    id:''
                },
                dialogFormVisible:false,
                formLabelWidth: '120px',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                }
            }
        }, methods: {
            /**
             * 显示预约套餐信息
             */
            showSetMemal(name, pageNum) {
                this.pageNum = pageNum;
                axios.get("/order/querySetMemal", {
                    params: {
                        'name': name,
                        'pageNum': pageNum
                    }
                }).then(data => {
                    if (data.data.code == '-998') {

                    } else if (data.data.code == null || data.data.code == '') {
                        console.log(data.data)
                        this.tableData = data.data;
                    } else {
                        this.$message({
                            showClose: true,
                            message: '查询失败!!',
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, /**
             显示预约检查项目列表
             */
            showCheckItem(name, pageNum) {
                this.pageNum2 = pageNum;
                axios.get("/order/queryCheckItem", {
                    params: {
                        'name': name,
                        'pageNum': pageNum
                    }
                }).then(data => {
                    if (data.data.code == '-998') {
                        this.$message({
                            showClose: true,
                            message: '你无该权限!!',
                            type: 'error'
                        });
                    } else if (data.data.code == null || data.data.code == '') {
                        console.log("a:"+JSON.stringify(data.data))
                        this.tableData2 = data.data;
                    } else {
                        this.$message({
                            showClose: true,
                            message: '查询失败!!',
                            type: 'error'
                        });
                    }
                }).catch(e =>{
                    alert("错误信息为:"+e)
                });
            },deleteOrder(id){
                console.log(id)
                /**
                 * 删除预约数据
                 */
                this.$confirm('此操作将永久删除该会员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() =>{
                    axios.get("/order/deleteOrder",{
                        params:{
                            "id":id.id
                        }
                    }).then(data =>{
                        if (data.data.code=='-998'){
                            this.$message({
                                showClose: true,
                                message: '你无该权限!',
                                type: 'error'
                            });
                        }else if (data.data=='true'||data.data==true){
                            this.$message({
                                showClose: true,
                                message: '删除成功!',
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '删除失败!',
                                type: 'error'
                            });
                        }
                        this.showSetMemal(this.name,this.pageNum);
                        this.showCheckItem(this.name2,this.pageNum2);
                    }).catch(e =>{
                        alert("错误信息为:"+e);
                    });
                }).catch(e =>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },handleEdit(row){
                this.dialogFormVisible=true;
                this.form.orderDate=row.orderDate;
                this.form.orderStatus=row.orderStatus;
                this.form.orderType=row.orderType;
                this.form.id=row.id;
            },cancelEdit(){
                this.dialogFormVisible=false;
                this.$message({
                    showClose: true,
                    message: '您取消修改!'
                });
            },updateOrder(form){
                axios.post("/order/updateOrder",{
                    'id':form.id,
                    'orderType':form.orderType,
                    'orderDate':form.orderDate,
                    'orderStatus':form.orderStatus
                }).then(data =>{
                    if (data.data.code=='-998'){
                        this.$message({
                            showClose: true,
                            message: '你无该权限!',
                            type: 'error'
                        });
                    }else if (data.data==true||data.data=='true'){
                        this.$message({
                            showClose: true,
                            message: '修改成功!',
                            type: 'success'
                        });
                    }else {
                        this.$message({
                            showClose: true,
                            message: '修改失败!!',
                            type: 'error'
                        });
                    }
                }).catch(e =>{
                    alert("错误信息为:"+e)
                });
                this.dialogFormVisible=false;
                this.showSetMemal(this.name,this.pageNum);
                this.showCheckItem(this.name2,this.pageNum2);
            }
        },created(){
            this.showCheckItem();
            this.showSetMemal()
        }
    });
</script>
</html>